<template>
	<view class="diaryContent" style="min-height: calc(100vh);">
		<view class="header">
			<view class="date">
				<text class="day">{{ date[0] }}</text>
				<text class="year">{{ date[1] }}</text>
				<text class="year">.</text>
				<text class="year">{{ date[2] }}</text>
			</view>
			<image :src="beautifulDiary.logoImgUrl" class="logo" mode="aspectFill"></image>
		</view>
		<view class="diaryBox">
			<view class="diaryImgBox"><auto-image class="diaryImg" :src="beautifulDiary.imgUrl" style="min-height: 447rpx;"></auto-image></view>
			<view v-if="beautifulDiary.photographer" class="diaryFooter">{{'摄影 | ' + beautifulDiary.photographer}}</view>
			<view class="diary-title">
				<view class="diaryText">{{ beautifulDiary.diaryContent }}</view>
			</view>
			<view class="diary-user-name">{{ beautifulDiary.userName || '' }}</view>
			<view class="diary-code"><image :src="beautifulDiary.qrCodeImgUrl" class="code" mode="aspectFill"></image></view>
		</view>
	</view>
</template>
<script>
import http, { uploadImages } from '@/common/request.js';
import { getCommonShareInfo } from '@/common/utils.js';
import AutoImage from '@/components/uni-image/uni-image.vue';
export default {
	onShareAppMessage() {
		return getCommonShareInfo()
	},
	components: {
		AutoImage
	},
	onLoad(params) {
		this.diaryId = params.diaryId || '';
		uni.loadFontFace({
			family: 'din',
			source: 'url("https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/fonts/PTDINCondensedCyrillic.ttf")',
			success() {}
		});
	},
	watch: {},
	data() {
		// 获取当前日期
		var myDate = new Date().toDateString().split(' ');
		const date = [myDate[2], myDate[1], myDate[3]];
		return {
			date,
			diaryId: '',
			// 日记
			beautifulDiary: {}
		};
	},
	mounted() {
		this.getData();
	},
	methods: {
		getData() {
			http('/api/cusBeautifulDiary/appIndexGetList', { method: 'GET', data: { cusDiaryId: this.diaryId } }).then(result => {
				this.beautifulDiary = result.data || {};
			});
		}
	}
};
</script>

<style scoped lang="less">
@import './index.css';
.diaryContent {
	position: relative;
	padding: 0;
	background-color: #ffffff;
	.header {
		padding: 0 28rpx;
		overflow: hidden;
		.date {
			margin-top: 57rpx;
		}
		.logo {
			position: absolute;
			width: 234rpx;
			height: 33rpx;
			right: 28rpx;
			top: 60rpx;
		}
	}
	.diaryBox {
		padding: 0;
		margin-top: 47rpx;
		box-shadow: none;
		.diaryImgBox {
			min-height: 502rpx;
			border-radius: 0;
			/deep/.diaryImg {
				border-radius: 0;
				min-height: 502rpx!important;
			}
		}
		.diaryFooter {
			font-size: 17rpx;
			font-weight: 400;
			color: #65645D;
			line-height: 29rpx;
		}
		.diaryText {
			margin-top: 40rpx;
			font-size: 26rpx;
			font-weight: 300;
			color: #66645d;
			line-height: 46rpx;
		}
		.diary-user-name {
			margin-top: 88rpx;
			font-size: 22prx;
			font-weight: 400;
			color: #8a8c8d;
			line-height: 46rpx;
		}
		.diary-code {
			margin-top: 45rpx;
			text-align: center;
			.code {
				width: 118rpx;
				height: 118rpx;
			}
		}
	}
}
</style>
